import React, { memo } from "react";
import { DjProgramWrap } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function DjProgram(props) {
  return (
    <DjProgramWrap>
      <div className="glory">
        <p>推荐节目</p>
        <NavLink
          to={{
            pathname: "/discover/djradio/recommend",
          }}
        >
          更多&gt;
        </NavLink>
      </div>
      <div className="g-ul-box">
        <ul>
          {props.djProgramRecommends.length !== 0
            ? props.djProgramRecommends.programs
                .slice(0, 10)
                .map((item, index) => {
                  return (
                    <li key={item.id} className="tj-libox">
                      <div
                        className="fl imgbox"
                        style={{ width: "40px", height: "40px" }}
                      >
                        <img src={getSizeImage(item.coverUrl, 40)} alt="" />
                      </div>
                      <div className="name-box fl">
                        <NavLink
                          to={{
                            pathname: "/program",
                            search: "?id=" + item.id,
                          }}
                        >
                          {item.mainSong.name}
                        </NavLink>
                        <NavLink
                          to={{
                            pathname: "/djradio",
                            search: "?id=" + item.radio.id,
                          }}
                          className="radio-name"
                        >
                          {item.radio.name}
                        </NavLink>
                      </div>
                      <div className="djCategory fl">
                        <NavLink
                          to={{
                            pathname: "/discover/djradio/category",
                            search: "?id=" + item.radio.categoryId,
                          }}
                        >
                          {item.radio.category}
                        </NavLink>
                      </div>
                    </li>
                  );
                })
            : ""}
        </ul>
      </div>
    </DjProgramWrap>
  );
});
